<template>
  <div id="goodslist">
    <div class="user-title">商品管理  <em>/</em>  <span>商品列表  </span></div>
    <div class="user-box">
      <div class="list-title">
        <div class="fl"><el-button type="primary"  @click="changeComponent('goodsAdd')">新增</el-button></div>
        <div class="fr"><el-button type="primary"  @click="save()">搜索</el-button></div>

      </div>
      <div class="user-table">
      <template>
          <el-table
          :data="goodsList"
          border
          style="width: 100%">
              <!--<el-table-column-->
                  <!--fixed-->
                  <!--prop="id"-->
                  <!--label="Id"-->
                  <!--width="250">-->
              <!--</el-table-column>-->
              <el-table-column
                  prop="goods_name"
                  label="名称"
                  width="300">
              </el-table-column>
            <el-table-column
              prop="catName"
              label="分类"
              width="200">
            </el-table-column>
            <el-table-column
              prop="shopPrice"
              label="商品价格"
              width="200">
            </el-table-column>
            <el-table-column
              prop="marketPrice"
              label="市场价格"
              width="100">
            </el-table-column>
            <el-table-column
              prop="goodsDesc"
              label="详情"
              width="150">
            </el-table-column>
            <el-table-column
              prop="goods_name"
              label="图片"
              width="250">
              <template slot-scope="scope">
                <img :src="'http://localhost:1337/'+item" v-for="(item,index) in scope.row.photoList" :key="index" class="listImg">
              </template>
            </el-table-column>
            <el-table-column
                  prop="createdAt"
                  label="时间"
                  width="250">
              </el-table-column>
              <el-table-column
                  fixed="right"
                  label="操作"
                  width="120"
                  align="center">
                  <template slot-scope="scope">
                  <el-button  type="text" size="small">编辑</el-button>
                  <el-button type="text" size="small" @click="del(scope.$index, scope.row)">删除</el-button>
                  </template>
              </el-table-column>
          </el-table>
      </template>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'goodslist',
  data () {
    return {
      msg: '商品列表',
      goodsName: '',
      goodsList: [],
      goodsClass: ''
    }
  },
  mounted: function () {
    this.getGoodsData()
  },
  methods: {
    changeComponent (page) {
      var _this = this
      this.publicFuction.changeComponent(_this, 'menuCurrentView', page)
    },
    getGoodsData: function () {
      this.$http.get('/api/goods/list')
        .then(response => {
          this.goodsList = response.data.data
        })
        .catch(err => {
          console.log(err)
        })
    },
    del (index, row) {
      let params = {id: row.id}
      this.$http.post('/api/goods/delete', params)
        .then(response => {
          this.$message('操作成功！')
          this.getGoodsData()
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="less">
  #goodslist{
    width: 100%;
    height: 100%;
    border: 1px solid #d2dae9;
    background: #fff;
    padding:0 35px;
    .user-title{
      height: 60px;
      line-height: 60px;
      border-bottom: 1px solid #eeeeee;
      color: #333;
      font-size: 14px;
      em{
        font-style:normal;
        margin: 0 5px;
        color: #aaa;
      }
      span{ color: #666;}
    }
    .input_box{margin: 28px 0}
    .el-input__inner{color: #999}
    .el-form-item__label{color: #333}
    .el-select{width: 100%}
    textarea{height: 160px}
    .dialog-footer{text-align: center!important;}
    .el-upload__tip{ width: 360px;line-height: 28px;height: 28px;margin-bottom: 15px}
    .el-upload__tip a{text-decoration:underline }
    .user-box{
      min-height: calc(~"100vh - 180px");
      .user-table{
        padding: 20px 0;
      }
      .list-title{
        width: 100%;
        height: 60px;
        line-height: 60px;
      }
      .el-checkbox{margin-right: 20px}
      .el-checkbox+.el-checkbox{margin-left: 0}
      .line{border-bottom: 1px solid #eeeeee;}
    }
    .el-input__inner{
      border:1px solid #dcdfe6;
    }
.listImg{
  width: 50px;
  height: 50px;
  margin-right: 10px;
}
  }
</style>
